<template>
   <div class="home">
       <div class="box" ref="box1"></div>
       <div class="box" ref="box2"></div>
       <div class="box" ref="box3"></div>
       <div class="box" ref="box4"></div>
   </div>
</template>

<script>
    import * as echarsts from 'echarts'
    import {getCurrentInstance,onMounted,reactive}  from  'vue'
    export default {
        name: "Home",
        setup(){
            let data=reactive({
                // 图表1对象
                myChart1:{},
                // 图表2对象
                myChart2:{},
                // 图表3对象
                myChart3:{},
                // 图表4对象
                myChart4:{},
            })
            let $this=getCurrentInstance()
            onMounted(()=>{
                //实例化echarts图表1
                data.myChart1=echarsts.init($this.refs.box1)
                // 绘制图表
                data.myChart1.setOption({
                    title: {
                        text: '房间月累计销售额'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['单人间', '双人家', '商务房', '总统房', '豪华套房', '标准间']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [10000, 20000, 30000, 40000, 50000, 60000]
                        }
                    ]
                });
                //实例化echarts图表2
                data.myChart2=echarsts.init($this.refs.box2)
                data.myChart2.setOption({
                    title: {
                        text: '房间日销售额'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['单人间', '双人家', '商务房', '总统房', '豪华套房', '标准间']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }]
                })
                //实例化echarts图表3
                //实例化echarts图表1
                data.myChart3=echarsts.init($this.refs.box3)
                data.myChart3.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['单人间', '双人家', '商务房', '总统房', '豪华套房','标准间']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 335, name: '单人间'},
                                {value: 310, name: '双人家'},
                                {value: 234, name: '标准间'},
                                {value: 135, name: '豪华套房'},
                                {value: 1548, name: '总统房'},
                                {value: 400, name: '商务房'},
                            ]
                        }
                    ]
                }),
                //实例化echarts图表4
                data.myChart4=echarsts.init($this.refs.box4)
                data.myChart4.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['单人间', '双人家', '标准间', '豪华套房', '总统房','商务房']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '单人间',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '双人家',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '标准间',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '商务房',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [120, 150, 240, 300, 180, 350, 500]
                        },
                        {
                            name: '豪华套房',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '总统房',
                            type: 'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {},
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                })
            })
        }
    }
</script>

<style scoped>
    .home{
        display: flex;
        flex-wrap: wrap; /*换行*/
        justify-content: space-between;

        width: 100%;
        height: 100%;

    }
 .box{
     width: 49%;
     height: 49%;
     border: 1px solid #dddd;
 }
</style>
